<template>
  <div>
    <el-drawer v-bind="$attrs" v-on="$listeners" @opened="onOpen" @close="onClose">
      <div class="action-bar" :style="{ 'text-align': 'left' }">
        <span class="bar-btn" @click="newGroup()"> <i class="el-icon-circle-plus-outline" /> 新增分类 </span>
        <span class="bar-btn delete-btn" @click="$emit('update:visible', false)"> <i class="el-icon-circle-close" /> 关闭 </span>
      </div>
      <div class="box">
        <template v-for="(group, inx) in formGroupList">
          <div class="board-column" :key="group.title" :style="{ top: 0, left: inx * 300 + 'px' }">
            <div class="board-column-header">{{ group.title }}</div>
            <draggable
              :list="group.list"
              class="board-column-content"
              :set-data="setData"
              :clone="clone"
              :group="{ name: 'people', pull: pullFunction }"
              @start="start"
            >
              <div v-for="item in group.list" :key="item.fid" class="board-item" @click="selected = item.fid">
                <i class="el-icon-s-unfold" />{{ item.title }}-{{ item.fid }}
                <template v-if="selected == item.fid">
                  <i @click="toEdit(item)" class="el-icon-edit-outline edit action-button" />
                  <i @click="toDel(item)" class="el-icon-delete del action-button" />
                </template>
              </div>
            </draggable>
          </div>
        </template>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable,
  },
  // eslint-disable-next-line vue/require-prop-types
  props: [],
  data() {
    return {
      selected: '',
      controlOnStart: true,
      formGroupList: [
        {
          title: '档案信息',
          list: [
            { title: '人员信息', fid: '1' },
            { title: '部门信息', fid: '2' },
          ],
        },
        {
          title: '考勤信息',
          list: [
            { title: '排班管理', fid: '3' },
            { title: '版次管理', fid: '4' },
          ],
        },
      ],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    toEdit(e) {
      console.log('toedit:', e)
    },
    toDel(e) {
      console.log('todel:', e)
    },
    clone(item) {
      return item
    },
    newGroup() {
      console.log('newGroup')
    },
    pullFunction() {
      return this.controlOnStart ? 'clone' : true
    },
    start({ originalEvent }) {
      this.controlOnStart = originalEvent.ctrlKey
    },

    setData(dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    onOpen() {
      // console.log('onOpen:', this.formData)
      // this.$refs.preview.load(this.formData)
    },
    onClose() {},
  },
}
</script>

<style lang="scss" scoped>
@import '@/components/xform/styles/mixin.scss';
::v-deep .el-drawer__header {
  display: none;
}
@import '@/styles/variables.scss';
@include action-bar;
.box {
  position: relative;
  width: 100%;
  height: calc(100vh - 33px);
  box-sizing: border-box;
  // background: #ddd;
}

.board-column {
  position: absolute;
  width: 260px;
  height: auto;
  overflow: hidden;
  background: #f0f0f0;
  border-radius: 3px;
  .board-column-header {
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    padding: 0 20px;
    text-align: center;
    background: $panGreen;
    color: #fff;
    border-radius: 3px 3px 0 0;
  }

  .board-column-content {
    height: auto;
    overflow: hidden;
    border: 10px solid transparent;
    min-height: 60px;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .board-item {
      position: relative;
      cursor: pointer;
      width: 98%;
      height: 32px;
      margin: 5px 0;
      font-size: 14px;
      color: #777;
      background-color: #fff;
      text-align: left;
      line-height: 32px;
      padding: 0px 8px;
      box-sizing: border-box;
      border-radius: 4px;
      box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
      .action-button {
        position: absolute;
        top: -4px;
        padding: 5px;
        background: #ddd;
      }
      .del {
        color: #e65d6e;
        right: 8px;
      }
      .edit {
        right: 36px;
        color: #30b08f;
      }
    }
  }
}
</style>
